<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			
			<table border="">
				<tr v-for="(stu,i) in stus">
					<td>
					{{stu.id}}
					</td>
					<td>
					{{stu.name}}
					</td>
					
					<td>
					{{stu.price}}
					</td>
					<td>
					{{stu.img}}
					</td>
					<td>
						{{stu.kc}}
					</td>
					<td>
						<button @click="del(i)">删除</button>
					</td>
				</tr>
			</table>
			商品编号:<input type="text" v-model="id" /><br />
			商品名称:<input type="text" v-model="name" /><br />
			price:<input type="text"  v-model="price" /><br />
			<button @click="add">添加</button>
		</div>
		
		<script>			
			
			var app = Vue.createApp({
				data(){
					return {
						id:'',
						name:'',
						price:'',
						img:'',
						kc:''
						
						stus:[
							{
								id:1,
								name:"iphone 14",
								price:"8888",
								imgSrc:"../../pics/iphone14.jpg" ,
								num:3
							},
							{
								id:2,
								name:"华为mate40",
								price:"8888",
								imgSrc:""
								num:5
							}
						]
						}
				},
				methods:{
					add:function(){
						this.stus.push({
						id:this.id,
						name:this.name,
						price:this.price
						})
					},
					del:function(i)
					{
						this.stus.splice(i,1)
					}
				}
			});
		
			var vm = app.mount("#app")
		</script>
	</body>
</html>